<template>
  <div id="detail">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <LogoHeader />
        </div>
      </el-col>
    </el-row>
    <div id="check_header">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <HoHeader />
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-if="this.ho_deadline == 0" class="warning">
      <span>作业已截止，不可提交！</span>
    </div>

    <div id="main">
      <el-container>
        <el-main :disabled="submit">
          <ul>
            <li v-for="(detail, index) in dataillist" :key="index">
              <el-row>{{ index + 1 }} . {{ detail.to_problem }}</el-row>
              <div v-if="submit == false">
                <el-input
                  v-model="input[index]"
                  placeholder="请输入内容"
                  clearable
                  @change="result(detail.to_id, input[index])"
                  :disabled="submit"
                />
              </div>
              <div v-else>
                <el-input
                  v-model="detail.st_to_answer"
                  clearable
                  @change="result(detail.to_id, input[index])"
                  :disabled="submit"
                ></el-input>
                <div class="answer" v-if="submit">
                  <div class="green">正确答案：{{ detail.to_answer }}</div>
                  <div
                    class="green"
                    v-if="detail.to_answer == detail.st_to_answer"
                  >
                    回答正确
                  </div>
                  <div class="red" v-else-if="detail.st_to_answer == null">
                    未作答！
                  </div>
                  <div class="red" v-else>
                    学生答案：{{ detail.st_to_answer }}
                  </div>
                </div>
              </div>
            </li>
            <div class="detail_button" v-if="this.ho_deadline == 1">
              <el-button
                class="detail_button_keep"
                :plain="true"
                @click="keep"
                :disabled="submit"
                >保存
              </el-button>
              <el-button
                class="detail_button_submit"
                type="primary"
                @click="submint"
                :disabled="submit"
              >
                提交</el-button
              >
            </div>
          </ul>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import LogoHeader from "../components/logo.vue";
import HoHeader from "../components/ho_header.vue";
export default {
  name: "",
  components: {
    LogoHeader,
    HoHeader,
  },
  data() {
    return {
      disable: "",

      input: [],

      showModal: false,
      grades: 0,
      dataillist: [
        {
          to_id: "",
          to_problem: "",

          to_answer: "",
          to_grade: "",
          st_to_answer: "",
        },
      ],
      submit: "",
      red: "",
    };
  },
  methods: {
    loadhHomeworkDetailData() {
      let i, j;
      this.axios
        .get(
          "http://10.197.43.62:8088/student/topiclist?ho_id=" +
            this.ho_id +
            "&st_id=" +
            this.st_id
        )
        .then((res) => {
          var tlist = [].concat(res.data);
          this.axios
            .get(
              "http://10.197.43.62:8088/student/topicyz?ho_id=" +
                this.ho_id +
                "&st_id=" +
                this.st_id
            )
            .then((res) => {
              this.dataillist = tlist;
              //  console.log("题目列表：");
              // console.log(this.dataillist);
              // console.log("显示学生答题情况：");
              // console.log(res.data);
              for (i = 0; i < this.dataillist.length; i++) {
                for (j = 0; j < res.data.length; j++) {
                  if (this.dataillist[i].to_id == res.data[j].to_id) {
                    this.dataillist[i].st_to_answer = res.data[j].st_to_answer;
                  }
                }
              }
              console.log("题目作答列表：");
              console.log(this.dataillist);
              for (i = 0; i < this.dataillist.length; i++) {
                this.input[i] = this.dataillist[i].st_to_answer;
              }
              console.log(this.input);
            });
        });

      this.axios
        .get("http://10.197.43.62:8088/student/stgrade?st_id=" + this.st_id)
        .then((res) => {
          // console.log(res.data);
          // console.log(this.ho_id);
          for (i = 0; i < res.data.length; i++) {
            if (this.ho_id == res.data[i].ho_id && res.data[i].ho_submit == 1) {
              this.submit = true;
              break;
            } else {
              this.submit = false;
            }
          }

          // console.log(this.submit);
        });
    },
    result(to_id, value) {
      console.log("选择：");
      console.log(this.input);
      console.log(value);
      // console.log("value:" + value + "---to_id:" + to_id + "-----this.ho_id:" + this.ho_id);
      this.axios.get(
        "http://10.197.43.62:8088/student/savetopic?to_id=" +
          to_id +
          "&st_to_answer=" +
          value +
          "&ho_id=" +
          this.ho_id +
          "&st_id=" +
          this.st_id
      );
    },
    keep() {
      this.$message({
        message: "保存成功！",
        type: "success",
      });
    },
    submint() {
      // console.log("this.ho_id:" + this.ho_id);
      this.axios
        .get(
          "http://10.197.43.62:8088/student/ceshitijiao?ho_id=" +
            this.ho_id +
            "&st_id=" +
            this.st_id
        )
        .then(() => {
          // console.log(res.data)
          this.$message({
            message: "提交成功！",
            type: "success",
          });
          this.$router.push("/st_home");
        });
    },
  },
  mounted() {
    this.loadhHomeworkDetailData();
  },
  computed: {
    ho_id() {
      return this.$store.state.ho_id;
    },
    ho_deadline() {
      return this.$store.state.ho_deadline;
    },
    st_id() {
      return this.$store.state.st_id;
    },
  },
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}

#detail {
  z-index: -1;
  width: 100%;
  background-image: url(../assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  position: absolute;
}

/*check_header  */
#check_header {
  padding: 10px 400px 20px;
}

/*  */
#main {
  width: 50%;
  margin: 0 auto;
  background-color: #fff;
}

li {
  margin: 20px;
  font-size: 20px;
}

.detail_button {
  padding-top: 50px;
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.green {
  display: inline-block;
  width: 50%;
  color: rgb(64, 172, 91);
}

.red {
  display: inline-block;
  width: 50%;
  color: red;
}
.warning {
  width: 100%;
  text-align: center;
  margin: 20px;
}

.warning span {
  color: red;
  font-size: 40px;
  background-color: #fff;
}
</style>
<style>
#detail .el-row {
  font-size: 30px;
  margin-bottom: 10px;
}

#detail .el-radio {
  display: inline-block;
  width: 50%;
  margin: 10px;
}

#detail .el-radio__label {
  font-size: 25px;
}

.is-checked {
  color: #000;
}
</style>